<template>
	<view class="goodsDetail">
		<view class="">
			<!-- 轮播部分 -->
			<view class="banner">
				<swiper class="swiper-main" :indicator-dots="!isVideo" interval="3000" :autoplay="!isVideo"
					:style="'height: ' + photo_height + ' !important;'">
					<swiper-item class="swiper-item" v-for="(item, index) in goods_photo" :key="index"
						:style="'height: ' + photo_height + ' !important;'">

						<image v-if="!isVideo" :src="item.images" mode="widthFix" @tap="goods_photo_view_event"
							:data-index="index" :style="'height: ' + photo_height + ' !important;'"></image>

						<video v-if="isVideo && goods.video!=null" :src="goods.video" autoplay controls loop
							:style="'height: ' + photo_height + ' !important;'"></video>

						<view class="switch-button" @tap="toggleMedia(index)" v-if="goods.video!=null">
							<text>{{ isVideo ? '图片' : '视频' }}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商品内容 -->
			<view class="detail-content">
				<!-- 其他费用 -->
				<view class="" v-if="goods.pricingModel == '1'">
					<view class="otherFeer bg_red">
						<view class="">销售工费：{{goods.wage == null ? '0.00' : goods.wage}}/克</view>
						<view class="">附加费：{{goods.surcharge == null ? '0.00' : goods.surcharge}}/克</view>
						<view class="">其它：{{goods.otherExpenses == null ? '0.00' : goods.otherExpenses}}/件</view>
					</view>
					<!-- v-if="roleName === '加盟商' || roleName === '业务经理'" -->
					<view class="otherFeer red" v-if="vipCertification == '1'">
						<view class="">批发工费：{{goods.wholesaleWage == null ?'0.00' : goods.wholesaleWage}}/克</view>
						<view class="">附加费：{{goods.wholesaleSurcharge == null ? '0.00' : goods.wholesaleSurcharge}}/克
						</view>
						<view class="">
							其它：{{goods.wholesaleOtherExpenses == null ? '0.00' : goods.wholesaleOtherExpenses}}/件</view>
					</view>
					<view v-else>
						<view class="apply" @click="OnApply">申请查看批发价???</view>
					</view>
				</view>
				<view class="goods_item">
					<view class="" v-if="(goods.goldWeight || null) != null">金重：<text
							class="org">{{goods.goldWeight}}</text></view>
					<view class="">材质：<text class="org">{{goods.goldColour}}</text></view>
					<view class="">款号：<text class="org">{{goods.barCode}}</text></view>
				</view>
				<!-- 商品标题 -->
				<view class="goods-name">{{goods.title}}</view>
				<view class="designer_title">
					<button class="dis-block br-0" type="default" size="mini" open-type="share" hover-class="none"
						@tap="popup_close_event">
						<image
							src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/d376ef7517f243c581076d9d55763ffd.png"
							mode="scaleToFill"></image>
					</button>
				</view>
				<!-- 商品款型 -->
				<view class="goods_type">
					<view class="goods_item">
						<view class="">库存：<text class="org">{{goods.inventory}}</text></view>
						<view class="">热度：<text class="org">{{goods.access_count}}</text></view>
						<view class="">销量：<text class="org">{{goods.sales_count}}</text></view>
					</view>
				</view>
				<!-- 产品说明 -->
				<view class="simple_desc" v-if="goods.simple_desc">
					<view class="simple_desc_title">产品说明</view>
					<mp-html :content="goods.simple_desc" class="simple_desc_content"></mp-html>
				</view>
				<!-- 商品详情 -->
				<view class="goods_detail" v-if="goods.content_web">
					<view class="goods_detail_name">商品详情</view>
					<view class="goods_detail_img">
						<mp-html :content="goods.content_web"></mp-html>
					</view>
				</view>
				<view class="goods_detail" v-else>
					<view class="goods_detail_name">商品详情</view>
					<view class="goods_detail_img" v-for="(item, index) in goods_photo" :key="index">
						<image :src="item.images" mode="widthFix" :data-value="item.images"
							@tap="goods_detail_images_view_event"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底线 -->
		<view class="bottom_line">--- 我是有底线的 ---</view>
		<!-- 底部购物车 -->
		<view class="footer">
			<view class="footer-item" @click="shop_event()">
				<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/90e6da37f533466b8437e94c26383e4a.png"
					mode="widthFix"></image>
				<view class="">首页</view>
			</view>
			<view class="footer-item" @tap="goods_favor_event">
				<image :src="(nav_favor_button_info.status || 0) == 1 ? common_static_url_ative : common_static_url"
					mode="widthFix"></image>
				<view class="">{{nav_favor_button_info.text}}</view>
			</view>
			<view class="footer-item">
				<button open-type="contact">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/75ca2381532b4eb294365b9c7c1b07a8.png"
						mode="widthFix"></image>
				</button>
				<view class="">客服</view>
			</view>
			<view class="footer-item" @click="onCart()">
				<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/4a7b93c1c0894e55b992df190325f560.png"
					mode="widthFix"></image>
				<view class="">购物车</view>
			</view>
			<view class="footer_cart">
				<!-- goods.reduceInventory 是否现货 1现货，0定货(样板)  v-if="goods.reduceInventory == '1'" -->
				<view class="addCart">
					<button @click="open1">立即抢购</button>
					<uni-popup ref="popup1" type="bottom">
						<buy-now-com :goods="goods" :goods_spec_List="goods_spec_List" @closePopup="closePopup"
							:vipCertification='vipCertification'></buy-now-com>
					</uni-popup>
				</view>
				<view class="buyNow">
					<button @click="open2">定货</button>
					<uni-popup ref="popup2" type="bottom">
						<cart-add-com :goods="goods" :goods_spec_List="goods_spec_List" :dtableData="dtableData"
							@update="updateDtableData" @closePopupdh="closePopupdh"></cart-add-com>
					</uni-popup>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import cartAddCom from "../../component/cart/cart_add.vue"
	import buyNowCom from "../../component/cart/buyNow.vue"


	var system_info = app.globalData.get_system_info() || {};
	var win_width = parseInt(system_info.windowWidth || system_info.screenWidth || 0);

	export default {
		data() {
			return {
				oshow: false,
				vipCertification: 0,
				goods_photo: [],
				goods: null,
				goods_spec_List: [],
				id: "",
				params: null,
				// 导航收藏按钮
				nav_favor_button_info: {
					"text": "收藏",
					"status": 0
				},
				common_static_url: 'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/cfbf09ae7d1243929f706cb52992c61f.png',
				common_static_url_ative: "https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/aee7db2a8c70494e9db2b076882c3d80.png",
				photo_height: (win_width <= 0) ? '50vh' : app.globalData.window_width_handle(win_width) + 'px',
				entryTime: 0,
				canvasWidth: 600,
				canvasHeight: 800,
				userCard: {},
				image_code: '',
				// 视频
				isVideo: false,
				isRecommend: null, //是否业务经理
				isManager: null, //是否加盟商
				dtableData: [],
				roleName: ''
			}
		},
		// 分享给朋友
		onShareAppMessage(res) {
			return {
				title: app.globalData.data.tenantName,
				path: "pages/goods_detail/goods_detail?id=" + this.goods.id + "&numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		onShow() {
			// 记录用户进来时间
			this.entryTime = Date.now();
			this.init();
		},
		onLoad(params) {
			if (typeof(params) != 'undefined') {
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			this.params = params;
			this.initItem();
		},
		onUnload() {
			this.OnEntryTime();
		},
		methods: {
			initItem() {
				for (let i = 0; i < 3; i++) {
					const item = {
						goldWeight: "",
						number: "1"
					};
					if ((this.goods && this.goods.storeCategoryName && this.goods.storeCategoryName == '戒指') || (this
							.goods && this.goods.storeCategoryName && this.goods.storeCategoryName == '手镯') || (this
							.goods && this.goods.storeCategoryName && this.goods.storeCategoryName == '手链')) {
						item.specify = "";
					}
					this.dtableData.push(item);
				}
			},
			updateDtableData(newData) {
				this.dtableData = newData;
			},
			init() {
				var user = app.globalData.get_user_info(this, "init", "");
				if (user != false) {
					// 用户未绑定用户则转到登录页面
					if (app.globalData.user_is_need_login(user)) {
						uni.navigateTo({
							url: "/pages/login/login?event_callback=init"
						})
					} else {
						this.vipCertification = user.vipCertification;
						this.goods_spec_list_event();
						this.get_data();
						// this.isRecommend = app.globalData.data.isRecommend;
						// this.isManager = app.globalData.data.isManager;
						// this.roleName = user.roleName;
					}
				}
			},
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/goods_detail/goods_detail",
					name: "商品详情页",
					remark: "商品详情页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						// console.log(res, "商品详情页停留时间");
					}
				})
			},
			// 弹出层
			open1() {
				this.$refs.popup1.open('bottom');
			},
			open2() {
				this.$refs.popup2.open('bottom');
			},
			closePopup() {
				this.$refs.popup1.close()
			},
			closePopupdh() {
				this.$refs.popup2.close()
			},
			// 跳转购物车
			onCart() {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			// 进入店铺
			shop_event() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 弹层关闭
			popup_close_event(e) {
				// console.log(e, "分享事件");
			},
			// 获取现货数据
			goods_spec_list_event() {
				let url = app.globalData.get_request_url("detail");
				uni.request({
					url: url,
					method: 'POST',
					data: this.params,
					dataType: 'json',
					success: (res) => {
						if (res.data.code == 200) {
							var data = res.data.data;
							this.goods = data.goods;
							this.goods_photo = this.goods.photo;
							this.goods_spec_List = this.goods.spavList;
							console.log(this.goods, 'this.goods');
						}
					}
				})
			},
			// 商品相册图片查看
			goods_photo_view_event(e) {
				var index = e.currentTarget.dataset.index;
				var all = [];
				for (var i in this.goods_photo) {
					all.push(this.goods_photo[i]['images']);
				}
				uni.previewImage({
					current: all[index],
					urls: all
				});
			},
			// 详情图片查看
			goods_detail_images_view_event(e) {
				var value = e.currentTarget.dataset.value || null;
				if (value != null) {
					uni.previewImage({
						current: value,
						urls: [value]
					});
				}
			},
			// 图片视频切换
			toggleMedia(index) {
				this.isVideo = !this.isVideo;
			},
			// 收藏事件
			goods_favor_event(e) {
				var user = app.globalData.get_user_info(this, 'goods_favor_event');
				if (user != false) {
					// 用户未绑定用户则转到登录页面
					if (app.globalData.user_is_need_login(user)) {
						uni.navigateTo({
							url: "/pages/login/login?event_callback=goods_favor_event"
						});
						return false;
					} else {
						uni.showLoading({
							title: '处理中...'
						});
						uni.request({
							url: app.globalData.get_request_url('favor', 'goods'),
							method: 'POST',
							data: {
								"id": this.goods.id
							},
							dataType: 'json',
							success: res => {
								uni.hideLoading();
								if (res.data.code == 200) {
									this.goods.is_favor = res.data.data.status;
									this.nav_favor_button_info = {
										"text": res.data.data.text,
										"status": res.data.data.status
									}
									app.globalData.showToast(res.data.msg, 'success');
								} else {
									if (app.globalData.is_login_check(res.data, this,
											'goods_favor_event')) {
										app.globalData.showToast(res.data.msg);
									}
								}
							},
							fail: () => {
								uni.hideLoading();
								app.globalData.showToast('服务器请求出错');
							}
						});
					}
				}
			},
			// 名片数据
			get_data() {
				var data = {}
				uni.request({
					url: app.globalData.get_request_url("card"),
					data: data,
					method: "POST",
					success: (res) => {
						this.userCard = res.data.data;
					}
				})
			},
			// 生成二维码
			Generate_code() {
				var page = 'pages/goods_detail/goods_detail';
				var scene = this.goods.id;
				var encodedPage = encodeURIComponent(page);
				var encodedScene = encodeURIComponent(scene);
				var url = app.globalData.get_request_url("getwxacodeunlimit");
				uni.request({
					url: url,
					data: {
						page: encodedPage,
						scene: encodedScene
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 200) {
							this.image_code = res.data.msg;
							const cardInfo = this.userCard;
							uni.getImageInfo({
								src: this.goods.images,
								success: (res) => {
									uni.hideLoading();
									const ctx = uni.createCanvasContext('canvasId', this);
									// 绘制白色背景
									ctx.setFillStyle('#fff');
									ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
									// 绘制产品图
									ctx.drawImage(res.path, 25, 40, this.canvasWidth - 350, this
										.canvasHeight - 550);
									// 绘制公司名称
									ctx.setFontSize(20);
									ctx.setFillStyle('#000');
									ctx.fillText(cardInfo.tenantName, 90, 30);
									// 绘制产品名称
									ctx.setFontSize(16);
									ctx.setFillStyle('#000');
									ctx.fillText(this.goods.title, 30, this.canvasHeight - 485);
									// 绘制产品价格
									ctx.setFontSize(15);
									ctx.setFillStyle('#ff0000');
									ctx.fillText('￥' + this.goods.price, 30, this.canvasHeight -
										465);
									// 绘制二维码
									// const base64 = cardInfo.qrCode;
									// const time = new Date().getTime();
									// const imgPath = wx.env.USER_DATA_PATH + "/poster" + time +
									// 	"share" + ".png";
									// const file = uni.getFileSystemManager();
									// file.writeFileSync(imgPath, base64, "base64");
									// ctx.drawImage(imgPath, 180, this.canvasHeight - 500, 80, 80);
									uni.getImageInfo({
										src: this.image_code,
										success: (img) => {
											ctx.drawImage(img.path, 180, this
												.canvasHeight - 480, 80, 80);
											ctx.draw(true, () => {
												uni.hideLoading();
											});
										}
									})
									// 绘制详情
									ctx.setFontSize(13);
									ctx.setFillStyle("#b5b5b5");
									ctx.fillText('长按识别', 30, this.canvasHeight - 430)

									ctx.setFontSize(13);
									ctx.setFillStyle("#b5b5b5");
									ctx.fillText('官方小程序', 30, this.canvasHeight - 410)
									// 绘制地址
									// ctx.setFontSize(16);
									// ctx.setFillStyle('#000');
									// ctx.fillText(cardInfo.address, 40, this.canvasHeight - 390);
									// 绘制电话
									// ctx.setFontSize(16);
									// ctx.setFillStyle('#000');
									// ctx.fillText(cardInfo.tel, 40, this.canvasHeight - 450);
									ctx.draw();
									this.openPoster();
								},
								fail: () => {
									uni.showToast({
										title: '图片加载失败',
										icon: 'none'
									});
								}
							});
						}
					}
				})
			},
			// 打开海报
			openPoster() {
				this.$refs.popupPoster.open('center');
			},
			// 生成海报
			get_poster() {
				uni.showLoading({
					title: "生成中...",
					mask: true
				})
				this.Generate_code();
			},
			// 保存海报
			savePoster() {
				if (this.goods.images) {
					uni.canvasToTempFilePath({
						canvasId: 'canvasId',
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
									this.closePoster();
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						},
						fail: () => {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
				}
			},
			// 分享海报
			sharePoster() {
				if (this.goods.images) {
					uni.canvasToTempFilePath({
						canvasId: 'canvasId',
						success: (res) => {
							const filePath = res.tempFilePath;
							uni.share({
								provider: 'weixin',
								type: 1,
								imageUrl: filePath,
								success() {
									uni.showToast({
										title: '分享成功',
										icon: 'success'
									});
								},
								fail(err) {
									uni.showToast({
										title: '分享失败',
										icon: 'none'
									});
								}
							});
						},
						fail() {
							uni.showToast({
								title: '生成海报失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
				}
			},
			// 关闭弹出层
			closePoster() {
				this.$refs.popupPoster.close()
			},
			OnApply() {
				uni.showModal({
					title: '温馨提示',
					content: '是否申请查看批发价?',
					cancelText: '取消',
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/apply/apply'
							})
						}
					}
				})
			}
		},
		components: {
			cartAddCom,
			// originalPriceCom,
			buyNowCom
		}
	}
</script>

<style lang="less">
	/* 轮播部分 */
	.banner {
		width: 100%;

		.swiper-main {
			width: 100vw !important;

			.swiper-item {
				position: relative;

				.switch-button {
					position: absolute;
					right: 20rpx;
					bottom: 70rpx;
					padding: 5px 10px;
					background-color: red;
					color: white;
					border-radius: 5px;
				}

				video {
					width: 100%;
				}

				image {
					width: 100%;
				}
			}
		}
	}


	// 其他费用
	.otherFeer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 28rpx;
		color: gray;
	}

	.apply {
		text-align: center;
		font-size: 28rpx;
		color: gray;
		letter-spacing: 10rpx;
		padding-bottom: 15rpx;
		padding-top: 15rpx;
	}

	.minPrice {
		padding-left: 20rpx;
		color: red;
	}

	.red {
		font-size: 12px;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.bg_red {
		background-color: red !important;
		color: white !important;
		height: 30px;
		line-height: 30px !important;
		font-size: 13px;
	}

	.goods-name {
		padding: 20rpx;
	}

	.designer_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.goods-supplierName {
			border: 1px solid darkred;
			font-size: 12px;
			color: darkred;
			margin-left: 20rpx;
		}

		button {
			width: 25px !important;
			margin-right: 10px;
			background-color: white !important;
			display: block !important;
			border: 0 !important;
			box-shadow: none;

			image {
				width: 25px;
				height: 25px;
				margin-left: -26rpx;
				padding-top: 15rpx;
			}
		}

		button::after {
			border: none;
		}
	}

	/* 商品款型 */
	.goods_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 15px;
		padding-right: 15px;
		font-size: 13px;
		// font-weight: bold;
		color: gray;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #e9e9e9;
	}

	.org {
		color: #e5c25c;
	}

	// 正品保障
	.authentic {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		font-size: 10px;
		color: gray;

		.authentic_item {
			display: flex;
			align-items: center;

			image {
				width: 15px;
				margin-right: 10rpx;
			}
		}
	}

	// 产品说明
	.simple_desc {
		padding: 20rpx;
		margin: 20rpx;
		color: gray;
		font-size: 13px;
		border-bottom: 2px dashed gray;

		.simple_desc_title {
			width: 160rpx;
			color: black;
			font-size: 16px;
			border-bottom: 2px solid black;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
		}

		.simple_desc_content {
			font-size: 13px;
			line-height: 1.6;
			color: #666;

			p {
				margin-bottom: 10rpx;
			}
		}
	}


	/* 商品详情 */
	.goods_detail {
		padding: 20rpx;
		font-size: 12px;
		color: gray;
	}

	.goods_detail_name {
		margin-top: 10px;
		margin-bottom: 20rpx;
		font-size: 15px;
		color: black;
	}

	.goods_detail_img image {
		width: 95%;
		margin: auto;
		display: block;
	}

	/* 测量方法 */
	.measure {
		margin-top: 20px;
	}

	.measure_name {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.measure image {
		width: 100%;
	}

	/* 底线 */
	.bottom_line {
		margin-top: 20px;
		padding-bottom: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: gray;
		font-size: 13px;
	}

	/* 底部购物车 */
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: white;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-left: 10px;
		font-size: 9px;
	}


	.footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 13px;
	}

	.footer-item button {
		width: 50rpx;
		height: 50rpx;
		padding: 0;
		border: 0;
		line-height: initial;
	}

	.footer-item button::after {
		border: none;
	}

	.footer-item image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 0;
	}

	.footer_cart {
		display: flex;
	}

	.addCart button,
	.buyNow button {
		border-radius: 30px;
		height: 70rpx;
		line-height: 35px;
		text-align: center;
		width: 200rpx;
		font-size: 14px;
		color: white;
		background-color: red;
	}

	.buyNow button {
		background-color: #f6c135;
		margin-left: 8px;
	}

	.yjgm button {
		background-color: white;
		color: black;
		border: 1px solid black;
	}

	.dis-block {
		display: block !important;
	}

	.br-0 {
		border: 0 !important;
		box-shadow: none;
	}

	img {
		pointer-events: none;
	}
</style>